import React from "react"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import { NavBar, Icon,Accordion, List } from 'antd-mobile';

import {getMemory} from "../../../../api/index"

import {withRouter} from 'react-router-dom'

import myStyle from "../../style/My.module.css"

// const tabs = [
//   { title: <Badge text={'3'}>First Tab</Badge> },
//   { title: <Badge text={'今日(20)'}>Second Tab</Badge> },
//   { title: <Badge dot>Third Tab</Badge> },
//   { title: <Badge dot>four Tab</Badge> },
// ];

const tabs = [
  { title: "直播" },
  { title: "歌曲" },
  { title: "视频" },
  { title: "其他" },
];

class Zuijing_Tabs extends React.Component {
  constructor(){
    super()
    this.state = {
      memory_arr:[]
    }
  }

  componentDidMount(){
    let uid = localStorage.getItem("uId")

    // login1()
    // .then(body=>body.json())
    // .then(res=>{
    //   console.log(res);
    //   getMemory(res.account.id)
    //   .then(body=>body.json())
    //   .then(res=>{
    //     console.log(res);
    //       this.setState({
    //         memory_arr:res.allData,
    //     })
    //     console.log(this.state.memory_arr);
    //   })
    // })


    getMemory(uid)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          memory_arr:res.allData,
      })
      console.log(this.state.memory_arr);
    })
  }

  goPlayMusic(id){
    console.log(id)
    this.props.history.push("/playmusic?id="+id)
  }

  render(){
    return (
      <div>
      <Tabs tabs={tabs}
        initialPage={1}
        onChange={(tab, index) => { console.log('onChange', index, tab); }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of second tab
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
          {/* Content of first tab */}
                {/* <List> */}
                      <ul className={myStyle.like_music_list} style={{}}>
                    {this.state.memory_arr.map((item,index)=><li key={item.song.id}
                      style={{zIndex:2}}
                      onClick={this.goPlayMusic.bind(this,item.song.id)}
                      >
                      <h3 style={{marginRight:"20px"}}>{index+1}</h3>
                      <div>
                        <h3>{item.song.name}</h3>
                        <span>{item.song.ar[0].name}</span>
                      </div>
                    </li>)}
                  </ul>
                    
                  {/* </List> */}
  
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of four tab
        </div>
      </Tabs>
      <WhiteSpace />
      {/* <Tabs tabs={tabs2}
        initialPage={1}
        tabBarPosition="bottom"
        renderTab={tab => <span>{tab.title}</span>}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of first tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of second tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
      </Tabs>
      <WhiteSpace /> */}
    </div>
    )
  }
}
 


export default withRouter(Zuijing_Tabs)